<template>
    <div>
        <el-row>
            <el-form :inline="true" ref="form" :model="form" label-width="66px" class="demo-form-inline" clo>
                <el-form-item prop="title">
                    <el-input size="mini" placeholder="请输入素材名称" v-model="form.title"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="search" size="mini">筛选</el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <el-row>
            <el-row class="pt20" v-if="!select">
                <!-- <pers-button v-if="multipleSelection.length" icon="" size="mini" @click="handleBatchDel()"
                    perms="sys:menu:add" type="warning" label="批量删除"></pers-button> -->
                <pers-button icon="" size="mini" @click="handleJumpDetail('add')" perms="kanke:textbook:courseware:add"
                    type="primary" :label="btnTxt"></pers-button>
            </el-row>
            <el-table :data="tableData" v-loading="loading" size="mini" style="width: 100%;margin-bottom: 20px;"
                @selection-change="handleSelectionChange" row-key="id" border stripe default-expand-all>
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column prop="cover_url" label="封面" header-align="center" align="center">
                    <template slot-scope="scope">
                        <el-image style="width: 100px; height: 100px" :src="scope.row.cover_url">
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column v-if="['video', 'audio'].includes(type)" prop="title" label="类型" header-align="center"
                    align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.is_multiple == 1">单一</span>
                        <span v-else-if="scope.row.is_multiple == 2">合集</span>
                        <span v-else> - </span>
                    </template>
                </el-table-column>

                <el-table-column prop="title" label="标题" header-align="center" align="center"></el-table-column>
                <el-table-column prop="update_time" label="最后更新时间" header-align="center"
                    align="center"></el-table-column>
                <el-table-column prop="remark" label="备注" header-align="center" align="center"></el-table-column>

                <el-table-column prop="publish_type" label="发布状态" header-align="center" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.publish_type == 1">发布成功</span>
                        <span v-else>未发布</span>
                    </template>
                </el-table-column>

                <el-table-column label="操作" header-align="center" align="center" width="340" v-if="!select">
                    <template slot-scope="scope">
                        <pers-button type="primary" size="mini" @click="handleCopy(scope.row)"
                            perms="kanke:textbook:courseware:copy" label="复制课件"></pers-button>
                        <!-- <el-divider direction="vertical"></el-divider> -->
                        <PersButton type="danger" perms="kanke:textbook:courseware:pub"
                            :label="scope.row.publish_type == 1 ? '下架' : ' 发布'" @click="handlePublish(scope.row)" />
                        <!-- <el-divider direction="vertical"></el-divider> -->
                        <PersButton type="primary" perms="kanke:textbook:courseware:edit" label="修改"
                            @click="handleJumpDetail('edit', scope.row)" />
                        <!-- <el-divider
                            direction="vertical"></el-divider> -->

                        <PersButton type="danger" perms="kanke:textbook:courseware:del" label="删除"
                            @click="handleDel(scope.row.id)" />
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pageInfo.pageNumber" :page-sizes="pageSizes" :page-size="pageInfo.pageSize"
                    background layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
                </el-pagination>
            </div>
        </el-row>
        <preview @close="previewItem = {}" v-if="previewItem.id" :item="previewItem" />
    </div>
</template>
<script>
import { pageSizes } from "@/constant/index.js";
import {
    COURSEWARE_NUM_MAP,
    COURSEWARE_BTN_MAP
} from "@/constant/kanke/courseware.js";
import { mapActions, mapState } from "vuex";
import PersButton from '../../../../../components/PersButton.vue';


export default {
    components: { PersButton },
    name: "KanKeTextbookCourseWareTabPane",
    props: {
        type: {
            type: String,
            default: "book"
        },
        select: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            loading: false,
            form: {},
            pageInfo: {
                pageNumber: 1,
                pageSize: 10,
                total: 0
            },
            previewItem: {},
            pageSizes,
            multipleSelection: [],
            currentId: null,
        };
    },
    computed: {
        ...mapState("courseware", ["tableData"]),
        btnTxt() {
            return COURSEWARE_BTN_MAP[this.type] || "";
        }
    },
    mounted() {
        this.init();
    },
    methods: {
        ...mapActions("courseware", ["getList", 'copyCourse', 'publishCourse', 'unpublishCourse', 'deleteCourse']),
        async init() {

            const params = {
                book_type: COURSEWARE_NUM_MAP[this.type],
                is_pop: this.select ? 1 : 0,
                ...this.pageInfo,
                ...this.form,
            };
            this.loading = true;
            const res = await this.getList(params);
            if (res.code == 200) {
                this.pageInfo.total = res.data.total;
            }
            this.loading = false;
        },
        handleSizeChange(val) {
            this.pageInfo.pageSize = val;
            this.init();
        },
        handleCurrentChange(val) {
            this.pageInfo.pageNumber = val;
            this.init();
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
            this.$emit("onSelectionChange", val);
        },
        search() {
            this.init()
        },
        handleJumpDetail(handleType, item = {}) {
            this.$store.commit('courseware/setContentDetail', {})
            this.$store.commit('courseware/setContent', [])
            this.$store.commit('courseware/setDetail', {})
            const query = {
                type: this.type,
                handleType,
                id: item.id || ''

            }
            this.$router.push({
                name: "Bookdetail",
                query
            });
        },
        async handleCopy({ id }) {
            if (id) {
                if (this.currentId) {
                    this.$message.error('当前正在进行复制,请稍后')
                    return;
                };
                this.currentId = id
                const res = await this.copyCourse({ id })
                this.currentId = null
                if (res.code == 200) {
                    this.$message.success('复制成功')
                    this.init()
                }
            }
        },
        async handlePublish({ id, publish_type }) {
            if (!id) {
                this.$message.error('参数错误')
                return;
            }

            const title = publish_type == 1 ? '确认是否该操作 该内容将不在课件素材库展示，且已被应用内容将同步隐藏' : '确认是否发布到课件素材库并被应用'
            const api = publish_type == 1 ? this.unpublishCourse : this.publishCourse

            this.$confirm(title, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async ({ value }) => {
                const res = await api({ id })
                if (res.code == 200) {
                    this.$message.success('操作成功')
                    this.init()
                }

            })

        },
        async handleDel(id) {
            if (!id) {
                this.$message.error('参数错误')
                return;
            }
            this.$confirm('确认是否删除及关联内容', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async ({ value }) => {
                const res = await this.deleteCourse({ id })
                if (res.code == 200) {
                    this.$message.success('删除成功')
                    this.init()
                }
            })
        }

    }
};
</script>
<style lang="scss" scoped></style>
